<template>
	<view>
		<view class="uni-header">
			<uni-stat-breadcrumb class="uni-stat-breadcrumb-on-phone" />
		</view>
		<view class="uni-container">
			<el-row v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
				element-loading-background="rgba(0, 0, 0, 0.8)">
				<el-card>
					<div slot="header" class="clearfix">
						<span class="card-item-first card-item" :class="(active==0?'card-item-select':'')"
							@click="next(0)">
							设置
						</span>
						<span class="card-item" :class="(active==1?'card-item-select':'')" @click="next(1)">
							模组
						</span>
						<span class="card-item" :class="(active==2?'card-item-select':'')" @click="next(2)">
							世界
						</span>
					</div>
					<room v-show="active === 0" :loading1="loading1" :drawer="drawer" :model="model" :meme="meme"
						:size="size" :labelPosition="labelPosition"></room>
					<mod v-show="active === 1" @setMod="setMod" @ssMod="ssMod" @setSelect="setSelect"
						@setDrawer="setDrawer" :select="select" :modflag="modflag" :mod="mod" :model="model"
						:size="size" :label-position="labelPosition" :modList="modList" @setModListData="setModListData"
						@setModData="setModData"></mod>

					<view v-show="active === 2">
						<el-tag v-for="(value, key) in worldDataList" :key="key" closable :disable-transitions="false"
							@close="handleClose(key)" @click="setWorldIndex(key+1,value)">
							{{"世界"+(key+1)}}
						</el-tag>

						<el-button class="button-new-tag" size="small" @click="handleInputConfirm">+ 新增世界</el-button>
						<view v-if="worldIndex>0">
							<view v-if="worldMapData">
								<Master v-show="masterData" :type="worldMapData.includes('地面')?0:1" :world="worldData"
									@getWorld="getWorldData">
								</Master>
								<el-form :size="size" :model="model" ref="form2" label-width="130px"
									:label-position="labelPosition">
									<el-divider style="align-items: center;" title="地图资源代码配置">地图资源代码配置</el-divider>
									<el-input @blur="setWorldData" type="textarea" placeholder="请输入地面设置" :rows="15"
										v-model="worldMapData"></el-input>
								</el-form>
							</view>
							<view v-else>
								<el-collapse accordion>
									<el-collapse-item title="森林世界预设">
										<el-card>
											<el-row>
												<el-col>
													<span>
														更轻松的游戏方式,更少受到来自世界的威胁。<br />
														饥饿、寒冷、过热和黑暗将不会杀死冒险家。<br />
														降低冒险家受到的伤害。永远可以在绚丽之门复活。
													</span>
													<br />
													<el-button :size="size" style="margin: 10px" @click="copy(0)">
														轻松
													</el-button>
												</el-col>
											</el-row>
											<el-divider></el-divider>
											<el-row>
												<el-col>
													<span>
														永不结束得饥荒沙盒模式。<br />
														永远可以在绚丽之门复活。
													</span>
													<br />
													<el-button :size="size" style="margin: 10px" @click="copy(1)">
														无尽
													</el-button>
												</el-col>
											</el-row>
											<el-divider></el-divider>
											<el-row>
												<el-col>
													<span>
														标准《饥荒》体验。
													</span>
													<br />
													<el-button :size="size" style="margin: 10px" @click="copy(2)">
														生存
													</el-button>
												</el-col>
											</el-row>
											<el-divider></el-divider>
											<el-row>
												<el-col>
													<span>
														外面就是荒野,充满了危险!<br />
														随机进入世界的一个地方。<br />
														死亡之后:选一名新冒险家试一下、再试一下。
													</span>
													<br />
													<el-button :size="size" style="margin: 10px" @click="copy(3)">
														荒野
													</el-button>
												</el-col>
											</el-row>
											<el-divider></el-divider>
											<el-row>
												<el-col>
													<span>
														这是对标准《不要饿死》体验的一种黑暗扭曲。
													</span>
													<br />
													<el-button :size="size" style="margin: 10px" @click="copy(4)">
														暗无天日
													</el-button>
												</el-col>
											</el-row>
											<el-divider></el-divider>
											<el-row>
												<el-col>
													<span>
														《饥荒联机版》,带有一点《泰拉瑞亚》风情。
													</span>
													<br />
													<el-button :size="size" style="margin: 10px" @click="copy(5)">
														泰拉瑞亚之味
													</el-button>
												</el-col>
											</el-row>
											<el-divider></el-divider>
											<el-row>
												<el-col>
													<span>
														在一个更艰难的世界中快速上手。
													</span>
													<br />
													<el-button :size="size" style="margin: 10px" @click="copy(6)">
														丰富森林
													</el-button>
												</el-col>
											</el-row>

										</el-card>

									</el-collapse-item>
									<el-collapse-item title="洞穴世界预设">
										<el-card>
											<el-row>
												<el-col>
													<span>
														探查洞穴……一起!
													</span>
													<br />
													<el-button :size="size" style="margin: 10px" @click="copy(7)">
														洞穴
													</el-button>
												</el-col>
											</el-row>
											<el-divider></el-divider>
											<el-row>
												<el-col>
													<span>
														更黑、更多蜘蛛的洞穴体验。
													</span>
													<br />
													<el-button :size="size" style="margin: 10px" @click="copy(8)">
														洞穴加强
													</el-button>
												</el-col>
											</el-row>
											<el-divider></el-divider>
											<el-row>
												<el-col>
													<span>
														《饥荒联机版》,带有一点《泰拉瑞亚》风情……的洞穴游!
													</span>
													<br />
													<el-button :size="size" style="margin: 10px" @click="copy(9)">
														泰拉瑞亚的洞穴
													</el-button>
												</el-col>
											</el-row>
										</el-card>
									</el-collapse-item>
								</el-collapse>
							</view>
						</view>
					</view>
				</el-card>
			</el-row>

			<el-drawer class="samintext" title="世界预设" :visible.sync="drawer" :with-header="false">


				<el-card v-if="active === 1 && select != 3">

					<el-row>
						<el-col>
							<el-form :size="size" :model="model" ref="form2" label-width="130px"
								:label-position="labelPosition">
								<el-divider style="align-items: center;" title="mod资源代码配置">mod代码配置
								</el-divider>
								<el-input @blur="setModData" type="textarea" placeholder="请输入mod设置" :rows="15"
									v-model="modList[index].config" v-if="modList.length >  0">
								</el-input>
							</el-form>
						</el-col>
					</el-row>
				</el-card>
				<el-card v-if="select == 1">

					<el-row v-loading="loading1">
						<el-col>
							<div class="block">

								<el-pagination small @current-change="handleCurrentChange" layout="prev, pager, next"
									:page-size="9" :total="total2">
								</el-pagination>
							</div>
							<div style="display: flex;flex-wrap: wrap;">
								<div class="demo-image__lazy"
									style="width: 32%;margin-right: 1%;margin-bottom: 1%;display: flex;flex-direction: column;justify-content: center;background-color: #e1e1e1;padding: 1%;box-sizing: border-box;"
									v-for="url in ssModList" :key="url.id">

									<div @click="addMod2(url.id)" v-popover:popover>
										<el-image style="width: 100%;min-height: 100px;" :src="url.img" lazy></el-image>
										<el-image :src="url.xjImg" lazy></el-image>
										<div class="demonstration">模组ID: {{ url.id }}</div>
										<div class="demonstration">模组名称: {{ url.name }}</div>
										<div class="demonstration">模组作者: {{ url.author }}</div>
									</div>
								</div>
							</div>
						</el-col>
					</el-row>
				</el-card>
			</el-drawer>

			<el-card style="margin-top: 20px;position: sticky;bottom: 0;z-index:10;">
				<view class=""
					style="display: flex;flex-wrap: wrap;justify-content: space-between;height: 80px;align-content: space-around;">
					<el-button :size="size" icon="el-icon-refresh-left" v-show="active === 0" @click="clearSetting()"
						type="warning">
						重置
					</el-button>
					<el-button style="margin: 0;" :size="size" type="primary" @click="save(1)">
						仅保存设置
					</el-button>
					<el-button style="margin: 0;" :size="size" type="primary" @click="save(3)">
						保存并重启
					</el-button>
					<el-button style="margin: 0;" :size="size" type="primary" @click="save(2)">
						生成新游戏
					</el-button>
					<el-button v-show="active === 1 || active === 2" :size="size" @click="drawer = true" type="primary"
						style="margin: 0;">
						选择世界预设
					</el-button>
				</view>

			</el-card>
		</view>

	</view>

</template>

<script>
	import Master from '../components/Master/Master.vue';
	import "./settingData.js"
	import room from './room/room.vue';
	import mod from './mod/mod.vue';
	const db = uniCloud.database();

	export default {
		data() {
			return {
				worldIndex: 0,
				abc: false,
				select: '',
				meme: meme,
				worldMapDataList: [masterMapData1, masterMapData2, masterMapData3, masterMapData4, masterMapData5,
					masterMapData6, masterMapData7, cavesMapData1, cavesMapData2, cavesMapData3
				],
				loading: false,
				masterWorld: {},
				cavesWorld: {},
				modurl: "",
				fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
				active: 0,
				max: 32,
				drawer: false,
				model: {
					clusterIntention: 'social',
					clusterName: undefined,
					clusterDescription: undefined,
					gameMode: 'survival',
					pvp: false,
					maxPlayers: 6,
					steamGroupId: "43220089",
					clusterPassword: undefined,
					token: undefined,
					masterMapData: undefined,
					cavesMapData: undefined,
					type: 1,
				},
				modData: undefined,
				worldMapData: undefined,
				worldType: 0, //0森林 1洞穴
				labelPosition: 'left',
				showData: false,
				size: 'medium',
				modflag: false,
				modInfo: {
					publishedfileid: '', //modid
					preview_url: '', //mod图片地址
					title: '', //mod名称
					time_updated: '', //mod更新时间
					time_created: '', //mod创建时间
					config: ''
				},
				mod: {
					publishedfileid: '', //modid
					preview_url: '', //mod图片地址
					title: '', //mod名称
					time_updated: '', //mod更新时间
					time_created: '', //mod创建时间
					config: ''
				},
				worldDataList: [],
				ssModText: '',
				ssModList: [],
				modList: [],
				modId: "",
				worldData: new Map(),
				index: 0,
				total2: 0,
				loading1: true,
				visible: false,
				world: 1
			}
		},
		components: {
			Master,
			room,
			mod
		},
		created() {
			//拉取服务器信息
			this.modflag = false;
			this.getConfig();
			this.getLabelPosition()
		},
		mounted() {
			window.onresize = () => {
				this.getLabelPosition()
			}
		},
		methods: {
			setWorldIndex(k, v) {
				this.worldIndex = k
				this.worldMapData = v[0]
				this.setWorldData()
				console.log(this.worldMapData);
			},
			handleClose(tag) {
				this.worldDataList.splice(tag, 1);
			},
			handleInputConfirm() {
				let arr = [undefined, this.model.modData]
				this.worldDataList.push(arr)
			},
			ssMod(val1, val2, val3) {
				this.ssModList = val1
				this.ssModText = val2
				this.total2 = val3
			},
			setSelect(val) {
				this.select = val
			},
			setDrawer(val1, val2) {
				if (val1) {
					this.drawer = val1
				}
				this.loading1 = val2

			},
			setModListData(val) {
				this.modList = val
			},
			setModList() {
				this.modList = []
				if (this.model) {
					let str = this.model.modData
					let arr = str.split('["workshop-')
					for (var i = 1; i < arr.length; i++) {
						let i1 = arr[i].indexOf('"]')
						this.modId = arr[i].substring(0, i1)
						let i2 = arr[i].indexOf('configuration')
						let i3 = arr[i].indexOf('enabled=true')
						this.getMod1(this.modId, arr[i].substring(i2, i3))
					}

				}
			},
			setModData() {
				let data1 = '["workshop-'
				let data2 = '"]={'
				let data3 = 'enabled=true },\n'
				// let data3 = '}'
				let modData = 'return {\n'
				if (this.modList) {
					this.modList.forEach(item => {
						modData = modData + data1 + item.publishedfileid + data2 + item.config + data3
					})
				}
				modData += '}'
				this.model.modData = modData
			},

			setWorldData() {
				let regexp = /[a-zA-Z_]{2,}/g
				let str111 = "overrides={"
				let str112 = this.worldMapData.substring(this.worldMapData.indexOf(
					str111) + str111.length, this.worldMapData.length)
				str112 = str112.substring(0, str112.indexOf("}"))
				let arr111 = str112.match(regexp)
				let arr = new Map();
				for (var i = 0; i < arr111.length; i = i + 2) {
					arr.set(arr111[i], arr111[i + 1])
				}
				this.masterData = arr
				// this.active++;
				// this.active--;
			},
			getCavesrData(val) {
				this.cavesData = val
				let str = 'return {\n' +
					'  background_node_range={ 0, 1 },\n' +
					'  desc="探查洞穴…… 一起！",\n' +
					'  hideminimap=false,\n' +
					'  id="DST_CAVE",\n' +
					'  location="cave",\n' +
					'  max_playlist_position=999,\n' +
					'  min_playlist_position=0,\n' +
					'  name="洞穴",\n' +
					'  numrandom_set_pieces=0,\n' +
					'  override_level_string=false,\n' +
					'  overrides={\n'
				let elem3 = Array.from(this.cavesData)
				elem3.forEach(item => {
					if ("" + item[1] == "true") {
						str = str + "    " + item[0] + '=' + item[1] + ',\n'
					} else {
						str = str + "    " + item[0] + '="' + item[1] + '",\n'
					}
				})
				str = str.substring(0, str.length - 2) + " \n"
				str += '  },\n' +
					'  required_prefabs={ "multiplayer_portal" },\n' +
					'  settings_desc="探查洞穴…… 一起！",\n' +
					'  settings_id="DST_CAVE",\n' +
					'  settings_name="洞穴",\n' +
					'  substitutes={  },\n' +
					'  version=4,\n' +
					'  worldgen_desc="探查洞穴…… 一起！",\n' +
					'  worldgen_id="DST_CAVE",\n' +
					'  worldgen_name="洞穴" \n' +
					'}'
				this.model.cavesMapData = str;
				this.setCavesrData()
			},
			getMasterData(val) {
				this.masterData = val
				let str = 'return {\n' +
					'  desc="森林标准《饥荒》体验。",\n' +
					'  hideminimap=false,\n' +
					'  id="SURVIVAL_TOGETHER",\n' +
					'  location="forest",\n' +
					'  max_playlist_position=999,\n' +
					'  min_playlist_position=0,\n' +
					'  name="标准森林",\n' +
					'  numrandom_set_pieces=4,\n' +
					'  override_level_string=false,\n' +
					'  overrides={\n'
				let elem2 = Array.from(this.masterData)
				elem2.forEach(item => {
					if ("" + item[1] == "true") {
						str = str + "    " + item[0] + '=' + item[1] + ',\n'
					} else {
						str = str + "    " + item[0] + '="' + item[1] + '",\n'
					}
				})
				str = str.substring(0, str.length - 2) + " \n"
				str += '  },\n' +
					'playstyle="survival",\n' +
					'  random_set_pieces={\n' +
					'    "Sculptures_2",\n' +
					'    "Sculptures_3",\n' +
					'    "Sculptures_4",\n' +
					'    "Sculptures_5",\n' +
					'    "Chessy_1",\n' +
					'    "Chessy_2",\n' +
					'    "Chessy_3",\n' +
					'    "Chessy_4",\n' +
					'    "Chessy_5",\n' +
					'    "Chessy_6",\n' +
					'    "Maxwell1",\n' +
					'    "Maxwell2",\n' +
					'    "Maxwell3",\n' +
					'    "Maxwell4",\n' +
					'    "Maxwell6",\n' +
					'    "Maxwell7",\n' +
					'    "Warzone_1",\n' +
					'    "Warzone_2",\n' +
					'    "Warzone_3" \n' +
					'  },\n' +
					'  required_prefabs={ "multiplayer_portal" },\n' +
					'  required_setpieces={ "Sculptures_1", "Maxwell5" },\n' +
					'  settings_desc="标准《饥荒》体验。",\n' +
					'  settings_id="SURVIVAL_TOGETHER",\n' +
					'  settings_name="标准森林",\n' +
					'  substitutes={  },\n' +
					'  version=4,\n' +
					'  worldgen_desc="标准《饥荒》体验。",\n' +
					'  worldgen_id="SURVIVAL_TOGETHER",\n' +
					'  worldgen_name="标准森林" \n' +
					'}'
				this.model.masterMapData = str;
				this.setMasterData()
			},

			handleCurrentChange(val) {
				this.loading1 = true;
				this.$http.get("http://mgfwg.qtkjcn.com/chat/getMod?p=" + val + "&str=" + this.modurl).then((data) => {
					this.ssModList = data.list
					this.loading1 = false;
				})
			},
			setMod(index) {
				this.drawer = true
				this.index = index
			},
			addMod2(val) {

				let flag = false
				this.modList.forEach(item => {
					if (item.publishedfileid == val) {
						this.$message({
							message: 'MOD重复添加',
							type: 'warning'
						});
						flag = true
						return
					}
				})
				if (!flag) {
					this.$http.get("/system/getMod?modId=" + (val - 0)).then((data) => {
						this.mod.preview_url = data.data[0].preview_url
						this.mod.publishedfileid = data.data[0].publishedfileid
						this.mod.time_created = data.data[0].time_created
						this.mod.title = data.data[0].title
						this.mod.time_updated = data.data[0].time_updated
						this.modflag = true;
						this.mod._id = undefined;
						db.collection('mod_list').add({
							...this.mod
						})
					})
					this.mod.config = "configuration_options={  },"
					this.modList.push(this.mod)
					this.setModData()
					this.$message({
						message: 'MOD添加成功',
						type: 'success'
					});
				}
			},
			getLabelPosition() {
				let windowWidth = window.innerWidth

				if (windowWidth < 768) {
					this.labelPosition = 'top'
					this.size = 'mini'
				} else {
					this.labelPosition = 'left'
					this.size = 'medium'
				}

			},
			copy(val) {

				this.worldMapData = this.worldMapDataList[val];
				this.worldDataList[this.worldIndex - 1][0] = this.worldMapDataList[val];
				this.setWorldData()
				this.successMessage('设置成功');
			},
			save(type) {
				let that = this
				uni.showModal({
					content: "确认执行操作吗?",
					success: function(res) {
						if (res.confirm) {
							that.model.type = type;
							let data1 = '["workshop-'
							let data2 = '"]={'
							let data3 = 'enabled=true },\n'
							// let data3 = '}'
							let modData = 'return {\n'
							
							that.modList.forEach(item => {
								modData = modData + data1 + item.publishedfileid + data2 + item
									.config + data3
							})
							
							modData += '}'
							that.model.modData = modData
							that.$http.post("/setting/saveConfig", that.model).then((data) => {
								if (data.code != 0) {
									that.warningMessage(data.message);
								} else {
									that.successMessage("成功");
									that.active = 0;
									that.getConfig();
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})

			},
			getConfig() {
				this.modList = []
				let str = ""
				let arr = []
				this.$http.get("/setting/getConfig").then(async (data) => {

					if (data.code == 0) {
						let regexp = /[a-zA-Z_]{2,}/g
						let str111 = "overrides={"
						if (data.data.masterMapData) {
							let str112 = data.data.masterMapData.substring(data.data.masterMapData.indexOf(
								str111) + str111.length, data.data.masterMapData.length)
							str112 = str112.substring(0, str112.indexOf("}"))
							let arr111 = str112.match(regexp)
							let map = new Map();
							for (var i = 0; i < arr111.length; i = i + 2) {
								map.set(arr111[i], arr111[i + 1])
							}
							this.masterData = map
						}
						if (data.data.cavesMapData) {
							let str113 = data.data.cavesMapData.substring(data.data.cavesMapData.indexOf(
									str111) +
								str111.length, data.data.cavesMapData.length)
							str113 = str113.substring(0, str113.indexOf("}"))
							let arr113 = str113.match(regexp)
							let map = new Map();
							for (var i = 0; i < arr113.length; i = i + 2) {
								map.set(arr113[i], arr113[i + 1])
							}
							this.cavesData = map
						}
						this.myMod = data.data.modData;
						this.model = data.data;
						this.model.ip = data.data.ip ? '127.0.0.1' : data.data.ip
						if (this.model) {
							str = this.model.modData
							arr = str.split('["workshop-')
							for (var i = 1; i < arr.length; i++) {
								let i1 = arr[i].indexOf('"]')
								this.modId = arr[i].substring(0, i1)

								let i2 = arr[i].indexOf('configuration')
								let i3 = arr[i].indexOf('enabled=true')
								this.getMod1(this.modId, arr[i].substring(i2, i3))
							}

						}
					}
				})
			},
			getMod1(modId, config) {
				db.collection("mod_list").where({
						'publishedfileid': modId
					}).get().then((res) => {
						let {
							result: r2
						} = res
						let r3 = r2.data[0]
						if (r3) {
							this.modInfo = {
								...r3,
								'config': config
							}
							this.modList.push(this.modInfo)
						} else {
							this.$http.get("/system/getMod?modId=" + modId).then((
								data) => {
								this.modInfo.preview_url = data.data[0]
									.preview_url
								this.modInfo.publishedfileid = data.data[0]
									.publishedfileid
								this.modInfo.time_created = data.data[0]
									.time_created
								this.modInfo.title = data.data[0].title
								this.modInfo.time_updated = data.data[0]
									.time_updated
								this.modInfo._id = undefined
								this.modInfo.config = config
								db.collection('mod_list').add({
									"preview_url": this.modInfo.preview_url,
									"publishedfileid": this.modInfo.publishedfileid,
									"time_created": this.modInfo.time_created,
									"title": this.modInfo.title,
									"time_updated": this.modInfo.time_updated,
								}).then((res) => {
									this.modList.push(this.modInfo)
								}).catch((err) => {
									console.log(err);
								})
							})
						}
					})
					.catch((err) => {
						uni.showModal({
							content: err.message || '查询失败',
							showCancel: false
						})
					})
			},
			clearSetting() {
				let tmp = {
					clusterIntention: 'social',
					clusterName: undefined,
					clusterDescription: undefined,
					gameMode: 'survival',
					pvp: false,
					maxPlayers: 6,
					steamGroupId: "43220089",
					clusterPassword: undefined,
					token: undefined,
					masterMapData: this.masterMapData1,
					cavesMapData: this.cavesMapData1,
					modData: undefined,
					type: 1,
					ip: "127.0.0.1"
				};
				this.model = tmp;
			},
			next(val) {
				this.active = val;
				this.abc = true
				if (val != 0) {
					if (val == 1) {
						this.getMasterData(this.masterData);
					}
					this.loading = true
					setTimeout(() => {
						this.loading = false
					}, 500)
				}
			},
			previous() {
				this.loading = true
				this.active--;
				if (this.active == 1 || this.active == 2) {
					this.loading = true
					setTimeout(() => {
						this.loading = false
					}, 500)
				} else {
					this.loading = false
				}
			},
			successMessage(message) {
				this.$message({
					message: message,
					type: 'success'
				});
			},
			warningMessage(message) {
				this.$message({
					message: message,
					type: 'warning'
				});
			},
		}
	}
</script>

<style scoped>
	>>>.el-input {
		margin-right: 20px;
	}

	>>>.el-form-item__content {
		display: flex;
	}

	>>>.uni-container {
		padding: 0 10px;
	}

	.text {
		font-size: 14px;
	}

	.item {
		margin-bottom: 18px;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}

	.box-card {
		width: 480px;
	}

	.mybtn-warn {
		background-color: #e43d33;
		color: #ffffff;
		/* box-shadow: 2rpx 0rpx 2rpx 5rpx #ee3d2d; */
	}

	.mybtn-warn-select {
		background-color: #8f939c;
		color: #ffffff;
		/* box-shadow: 2rpx 0rpx 2rpx 5rpx #ee3d2d; */
	}

	.mybtn-warn {
		background-color: #e43d33;
		color: #ffffff;
		/* box-shadow: 2rpx 0rpx 2rpx 5rpx #ee3d2d; */
	}

	.mybtn-warn-select {
		background-color: #8f939c;
		color: #ffffff;
		/* box-shadow: 2rpx 0rpx 2rpx 5rpx #ee3d2d; */
	}

	.mybtn-success {
		background-color: #67C23A;
		color: #ffffff;
		/* box-shadow: 2rpx 0rpx 2rpx 5rpx #ee3d2d; */
	}

	.mybtn-success-select {
		background-color: #409EFF;
		color: #ffffff;
		/* box-shadow: 2rpx 0rpx 2rpx 5rpx #ee3d2d; */
	}

	.card-item-first {
		border-radius: 10px 0 0 0;
	}

	.card-item-last {
		border-radius: 0 10px 0 0;
	}

	.card-item {
		display: inline-block;
		padding: 20rpx 30rpx;
		border: #409EFF 2px solid;
		/* background-color: #00aaff; */
		border-radius: 10px;
		color: #353535;
		margin-right: 10px;
		cursor: pointer;
	}

	.card-item-select {
		display: inline-block;
		padding: 20rpx 30rpx;
		border: #ffaa00 2px solid;
		/* background-color: #ffaa00; */
		border-radius: 10px;
		color: #353535;
		margin-right: 10px;
	}

	.clearfix {
		/* font-size: 20rpx; */
	}

	.samintext {
		font-size: 20rpx;

	}

	>>>.el-card__body {
		padding: 20rpx;
	}

	.el-tag+.el-tag {
		margin-left: 10px;
	}

	.button-new-tag {
		margin-left: 10px;
		height: 32px;
		line-height: 30px;
		padding-top: 0;
		padding-bottom: 0;
	}

	.input-new-tag {
		width: 90px;
		margin-left: 10px;
		vertical-align: bottom;
	}
</style>